<template>
	<div style="height: 100%;">
		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;" class="displayFlexBet bgfff">
			<div>
				<span style="margin-right: 10px;color: #999;">日期</span>
				<el-date-picker type="monthrange" v-model="serchTimes" clearable range-separator="——————"
					:picker-options="pickerOptions" :editable="false" start-placeholder="开始日期" end-placeholder="结束日期" size="small"
					:unlink-panels="true" value-format="yyyy-MM" />
				</el-date-picker>

				<el-button icon="el-icon-search" type="primary" @click="getTableData()" size="small" class="ml10">查询</el-button>
			</div>

			<!-- <div @click="downLoadExcle" class="downLoadText">下载</div> -->
		</div>

		<slot name="header"></slot>

		<div style="padding: 10px;">
			<div class="displayFlex" style="margin-bottom: 10px;">
				<div style="margin-right: 10px;">{{serchTimes[0]}}</div>

				<el-button icon="el-icon-download" type="primary" @click="downLoadExcle(serchTimes[0])" size="small"
					class="ml10">下载</el-button>
			</div>
			<el-table :data="tableData1.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column prop="wasteName" label="名称" width="150">
				</el-table-column>
				<el-table-column label="类别" prop="wasteClassificationStr" width="150">
				</el-table-column>
				<el-table-column prop="produceQty" label="产生量" width="150">
				</el-table-column>
				<el-table-column prop="inStorageQty" label="贮存量" width="150">
				</el-table-column>
				<el-table-column prop="currentQty" label="累计贮存量" width="150">
				</el-table-column>
				<el-table-column prop="selfUseMethod" label="自行利用方式" width="150">
				</el-table-column>
				<el-table-column prop="selfUseQty" label="自行利用数量" width="150">
				</el-table-column>
				<el-table-column prop="entrustUseMethod" label="委托利用方式" width="150">
				</el-table-column>
				<el-table-column prop="entrustUseQty" label="委托利用数量" width="150">
				</el-table-column>
				<el-table-column prop="selfDisposeMethod" label="自行处置方式" width="150">
				</el-table-column>
				<el-table-column prop="selfDisposeQty" label="自行处置数量" width="150">
				</el-table-column>
				<el-table-column prop="entrustDisposeMethod" label="委托处置方式" width="150">
				</el-table-column>
				<el-table-column prop="entrustDisposeQty" label="委托处置数量" width="150">
				</el-table-column>
			</el-table>
		</div>

		<div style="padding: 10px;">
			<div class="displayFlex" style="margin-bottom: 10px;">
				<div style="margin-right: 10px;">{{nextMonth(serchTimes[0])}}</div>

				<el-button icon="el-icon-download" type="primary" @click="downLoadExcle(nextMonth(serchTimes[0]))" size="small"
					class="ml10">下载</el-button>
			</div>
			<!-- <div class="displayFlex" style="margin-bottom: 10px;">
				<div style="margin-right: 10px;">{{serchTimes[0]}}</div>
				<div @click="downLoadExcle(serchTimes[0])" class="downLoadText">下载</div>
			</div> -->
			<el-table :data="tableData2.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column prop="wasteName" label="名称" width="150">
				</el-table-column>
				<el-table-column label="类别" prop="wasteClassificationStr" width="150">
				</el-table-column>
				<el-table-column prop="produceQty" label="产生量" width="150">
				</el-table-column>
				<el-table-column prop="inStorageQty" label="贮存量" width="150">
				</el-table-column>
				<el-table-column prop="currentQty" label="累计贮存量" width="150">
				</el-table-column>
				<el-table-column prop="selfUseMethod" label="自行利用方式" width="150">
				</el-table-column>
				<el-table-column prop="selfUseQty" label="自行利用数量" width="150">
				</el-table-column>
				<el-table-column prop="entrustUseMethod" label="委托利用方式" width="150">
				</el-table-column>
				<el-table-column prop="entrustUseQty" label="委托利用数量" width="150">
				</el-table-column>
				<el-table-column prop="selfDisposeMethod" label="自行处置方式" width="150">
				</el-table-column>
				<el-table-column prop="selfDisposeQty" label="自行处置数量" width="150">
				</el-table-column>
				<el-table-column prop="entrustDisposeMethod" label="委托处置方式" width="150">
				</el-table-column>
				<el-table-column prop="entrustDisposeQty" label="委托处置数量" width="150">
				</el-table-column>
			</el-table>
		</div>

		<div style="padding: 10px;">
			<div class="displayFlex" style="margin-bottom: 10px;">
				<div style="margin-right: 10px;">{{serchTimes[1]}}</div>
				<el-button icon="el-icon-download" type="primary" @click="downLoadExcle(serchTimes[1])" size="small"
					class="ml10">下载</el-button>
			</div>
			<el-table :data="tableData3.list" style="width: 100%" size="mini" v-cloak border>
				<<el-table-column prop="wasteName" label="名称" width="150">
					</el-table-column>
					<el-table-column label="类别" prop="wasteClassificationStr" width="150">
					</el-table-column>
					<el-table-column prop="produceQty" label="产生量" width="150">
					</el-table-column>
					<el-table-column prop="inStorageQty" label="贮存量" width="150">
					</el-table-column>
					<el-table-column prop="currentQty" label="累计贮存量" width="150">
					</el-table-column>
					<el-table-column prop="selfUseMethod" label="自行利用方式" width="150">
					</el-table-column>
					<el-table-column prop="selfUseQty" label="自行利用数量" width="150">
					</el-table-column>
					<el-table-column prop="entrustUseMethod" label="委托利用方式" width="150">
					</el-table-column>
					<el-table-column prop="entrustUseQty" label="委托利用数量" width="150">
					</el-table-column>
					<el-table-column prop="selfDisposeMethod" label="自行处置方式" width="150">
					</el-table-column>
					<el-table-column prop="selfDisposeQty" label="自行处置数量" width="150">
					</el-table-column>
					<el-table-column prop="entrustDisposeMethod" label="委托处置方式" width="150">
					</el-table-column>
					<el-table-column prop="entrustDisposeQty" label="委托处置数量" width="150">
					</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					ticketId: '',
					selectType: 0,
					startTime: '',
					endTime: '',
					entWasteId: '',
				},
				dateValues: [],
				tableData1: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				tableData2: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				tableData3: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},

				pickerOptions: {
					//首先是抉择出开始工夫，依据开始工夫给出可选的六个月工夫范畴
					onPick: ({
						maxDate,
						minDate
					}) => {
						this.selectData = minDate.getTime();
						if (maxDate) {
							// 解除限制
							this.selectData = '';
						}
					},
					disabledDate: (time) => {
						if (!this.isNull(this.selectData)) {
							const curDate = this.selectData;
							const three = 120 * 24 * 3600 * 1000; // 6个月
							const threeMonths = curDate + three; // 开始工夫+6个月
							return time.getTime() < curDate || time.getTime() > threeMonths;
						}
					}
				},
				serchTimes: [],
				selectData: '',
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.ticketId = that.$store.state.token
			that.params.entWasteId = that.getQueryString("wasteId")
			that.serchTimes = [that.beforeThree(), that.nowDate()]
			that.getTableData()
		},
		methods: {

			nowDate() {
				const loadYear = new Date().getFullYear()
				let loadMonth = new Date().getMonth() + 1
				let loadDay = new Date().getDate()
				if (loadMonth >= 1 && loadMonth <= 9) {
					loadMonth = '0' + loadMonth
				}
				if (loadDay >= 0 && loadDay <= 9) {
					loadDay = '0' + loadDay
				}
				const date = loadYear + '-' + loadMonth
				return date
			},

			beforeThree() {
				const dates = new Date()
				dates.setMonth(dates.getMonth() - 2)
				var pastMonth = dates.getMonth() + 1
				var pastDay = dates.getDate()
				if (pastMonth >= 1 && pastMonth <= 9) {
					pastMonth = '0' + pastMonth
				}
				if (pastDay >= 0 && pastDay <= 9) {
					pastDay = '0' + pastDay
				}
				const endDate = dates.getFullYear() + '-' + pastMonth
				return endDate
			},

			nextMonth(date) {
				let startDate = moment(date).add(1, "month").startOf("month").format("YYYY-MM")
				let endDate = moment(date).add(1, "month").endOf("month").format("YYYY-MM")
				return startDate
			},


			// 查看是否为空
			isNull(value) {
				if (value) {
					return false;
				}
				return true;
			},

			//选择台账类型
			selectType(type) {
				that.params.selectType = -1

				setTimeout(function() {
					that.tableData.pageIndex = 1
					that.params.selectType = type
					that.getTableData()
				}, 500)

			},

			changeDate() {
				that.params.startTime = that.dateValues[0]
				that.params.endTime = that.dateValues[1]
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle(date) {
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"
				let apiName = "/sw/standBook/createMonthStandBookExcel"

				apiName = apiName + '?ticketId=' + that.params.ticketId + "&date=" + date
				window.open(appPath + apiName)
			},

			getTableData() {
				that.params.date = that.serchTimes[0] + '-01'
				let apiName = "/sw/standBook/getSwWasteTagMonthStandBookList"
				that.ajax({
					url: apiName + '?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData1.list = result.data;

						}
					},
				})

				that.params.date = that.nextMonth(that.serchTimes[0]) + '-01'
				that.ajax({
					url: apiName + '?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData2.list = result.data;

						}
					},
				})

				that.params.date = that.serchTimes[1] + '-01'
				that.ajax({
					url: apiName + '?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData3.list = result.data;

						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>